<template>
    <Center>
        <div class="p-8" style="height: 100%;" >
            <div class="text-gray-700 font-bold">我收藏的歌单</div>
            <el-row class="mt-4" >
                <el-col :span="4" class="p-3 flex justify-center items-center pointer" v-for="(item, index) in mySongs"
                    style="position: relative;" @click="onClick(item.id)">
                    <el-image :src="baseUrl + item.image" class="rounded" style="width:100px;height:100px;" />
                    <div class="center-text flex justify-center items-center text-white">{{ item.title }}</div>
                </el-col>
            </el-row>            
        </div>
    </Center>
</template>
<script setup>
import test from "@/assets/imgs/1.webp";
import Center from '../../components/common/Center.vue'
import { Delete, CaretRight, Search, Share, Download } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
import { songsMy ,songsCollectMy} from "@/http/api";
import { ref, computed, onMounted, watch } from "vue";
const router = useRouter();
const page = ref(1);
const albumList = ref([]);
const baseUrl = import.meta.env.VITE_API_URL;
const tableData = ref([]);
const mySongs = ref([]);
const onClick = function (e) {
    router.replace(`/myfavorite/list?id=${e}`)
}

onMounted(() => {
    getUserSongList();
});
const getUserSongList = async () => {
    const { data } = await songsCollectMy({
        songs_id: 19,
    });
    mySongs.value = data.songs_collect;
}
</script>
<style scoped>
.center-text {
    position: absolute;
    width: 100%;
    height: 100%;
}
</style>